<style>
    .upload-container {
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
    
    .upload-file-wrapper form {
        width: 300px;
        height: 190px;
        position: relative;
        border: 1px dotted;
    }
    
    .upload-file-wrapper input,
    .upload-file-wrapper img {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
    }
    
    .upload-file-wrapper input {
        z-index: 10;
        opacity: 0;
    }
    
    .last-form-data-wrapper {
        position: relative;
        width: 300px;
        height: 190px;
        position: relative;
        border: 1px dotted;
    }
</style>
<div class="upload-container">
    <div class="first-upload-file-wrapper upload-file-wrapper">
        <span style="font-size: 20px"> iframe 跨域进行文件上传</span>
        <form target="uploadTarget" method="POST" enctype="multipart/form-data">
            <input type="file" name="avatar">
            <img src="/img/upload/img_bg.jpg" alt="图片没有加载" width="300px">
        </form>
        <iframe style="display: none" name="uploadTarget" src="" frameborder="1"></iframe>
    </div>

    <div class="second-upload-file-wrapper upload-file-wrapper">
        <span style="font-size: 20px"> iframe 相同域域进行文件上传</span>
        <form target="seconddUploadTarget" action="/upload" method="POST" enctype="multipart/form-data">
            <input type="file" name="avatar">
            <img src="/img/upload/img_bg.jpg" alt="图片没有加载" width="300px">
        </form>
        <iframe style="display: none" name="seconddUploadTarget" src="" frameborder="0"></iframe>
    </div>

    <div class="last-upload-file-wrapper upload-file-wrapper">
        <span style="font-size: 20px"> formaData进行文件上传</span>
        <div class="last-form-data-wrapper">
            <input id="file" type="file">
            <img src="/img/upload/img_bg.jpg" alt="图片没有加载" width="300px">
        </div>
    </div>
</div>
<hr>
<div class="first-desc-img">
    <div class="text">iframe 跨域进行文件上传代码
    </div>
    <img src="/img/upload/first-desc-img.png" alt="">
</div>
<div class="second-desc-img">
    <div class="text">iframe 相同域进行文件上传代码
    </div>
    <img src="/img/upload/second-desc-img.png" alt="">
</div>
<div class="last-desc-img">
    <div class="text"> formaData进行文件上传
    </div>
    <img src="/img/upload/last-desc-img.png" alt="">
</div>
<script>
    // 跨域进行文件的上传 模拟ajax实现页面无刷新
    ! function(window, document, $, undefined) {
        function getMsg(url) {
            $('.first-upload-file-wrapper img')[0].src = url;
        }
        let paramUrl = location.href.substr(0, location.href.lastIndexOf('/'));
        $('.first-upload-file-wrapper input').on('change', function() {
            $('.first-upload-file-wrapper form')
                .attr('action', `http://api.hyfarsight.com/upload/async?callbackurl=${paramUrl}/uploadTmp`)
                .submit()
        })
        window.getMsg = getMsg;
    }(window, document, jQuery)

    // iframe非跨域进行文件的上传
    ! function(window, document, $, undefined) {
        $('.second-upload-file-wrapper iframe').on('load', function() {

            $('.second-upload-file-wrapper img')[0].src = JSON.parse(this.contentDocument.body.innerHTML).url
        })

        $('.second-upload-file-wrapper input').on('change', function() {
            $('.second-upload-file-wrapper form').submit()
        })
    }(window, document, jQuery)


    ! function(window, document, $, undefined) {
        $('.last-upload-file-wrapper input').on('change', function() {
            let formData = new FormData()
            formData.append('avatar', file.files[0]);

            let xhr = new XMLHttpRequest()
            xhr.open('POST', '/upload/formData')
            xhr.send(formData);
            xhr.onreadystatechange = function() {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    $('.last-upload-file-wrapper img')[0].src = JSON.parse(xhr.responseText).url;
                }
            }
        })
    }(window, document, jQuery)
</script>